<template>
  <div class="Cluster_Management">
    <div class="pubBig Privilege">
      <div class="h0">
        <p class="lt"></p>
      </div>
      <div class="dDownMain">
        <div
          class="twoBox"
          :style="
            this.$route.query.Token
              ? 'top:50px;left:10px'
              : 'top: 100px;padding:10px'
          "
        >
          <div
            style="height: 50%"
            v-for="(i, index) in card_list_JQ"
            :key="index"
          >
            <p>{{ i.SubscribeAppName }}：</p>
            <div
              v-for="(item, index2) in i.List"
              :key="index2"
              style="
                width: 15%;
                margin: 1%;
                height: 180px;
                display: inline-block;
              "
            >
              <div class="card_style">
                <div style="height: 80%; background-color: #ccffff">
                  <span class="card_child">{{ item.appName }}</span
                  ><br />
                  <span class="card_child">{{ item.dbName }}</span
                  ><br />
                </div>
                <div
                  style="height: 20%; background-color: #3366ff; color: #fff"
                >
                  <span class="card_child">{{ item.viewName }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      card_list_JQ: [],
      card_list_QZJ: [],
    };
  },
  methods: {
    getCluster() {
      this.$get("/ServiceManage/Service/ViewSubscribe").then((res) => {
        this.card_list_JQ = res;
      });
    },
    getFront() {
      this.$post("/ServiceManage/Cluster/List?cluType=Front").then((res) => {
        if (res.code == 0) {
          this.card_list_QZJ = res.data;
        }
      });
    },
  },
  mounted() {
    // document.getElementById("2").focus();
  },
  created() {
    if (this.$route.query.Token) {
      localStorage.setItem("Token", this.$route.query.Token);
    }
    this.getCluster();
    // this.getFront();
  },
};
</script>
<style lang="scss" scoped>
.Cluster_Management {
  .top-input {
    display: inline-block;
    width: 350px;
  }

  .box-top {
    margin-top: 15px;
    margin-left: 5px;
  }
  .card_style {
    width: 100%;
    height: 100%;
    border: 2px solid #00ccff;
    text-align: center;
  }
  .card_child {
    margin: 0 auto;
    position: relative;
    top: 30%;
    transform: translateY(-50%);
  }
}
</style>
